<template>
	<view class="content">
		<view class="header">
			<view class="statusBar" :style="{ height: statusBarHeight + 'PX'}"></view>
			<view class="titleView">
				<view class="search" @click="searchClick">
					<vide class="iconfont icon-sousuo"></vide>
				</view>
				<view class="title">
					<text>分类</text>
				</view>
				<view class="unfold" @click="unfoldClick" >
					<image src="../../static/images/unfold.png" mode="" :class="{ spin: rotate}"></image>
				</view>
			</view>
		</view>
		
		<aui-loading
		  :show="auiLoading.show" 
		  :type="auiLoading.type" 
		  :direction="auiLoading.row" 
		  :msg="auiLoading.msg" 
		  :mask="auiLoading.mask"
		  :theme="auiLoading.theme"
		  ref="auiLoading"
		></aui-loading>
		
		<view class="classify-item">
			<scroll-view scroll-y :style="{ height: scrlloClassifyItemHeight + 'px'}" 
				@scrolltolower="handleToLower" refresher-triggered :scroll-top="scrollTop"
				scroll-with-animation   @scroll="scroll" 
				>
				<uni-transition mode-class="slide-top" :show="rotate"  :duration="300">
					<!-- 分类 -->
					<swiperNavBar
						:scrollIntoView="classify.scrollIntoView"
						:swiperTabList='classify.swiperTabList' 
						:swiperTabIdx='classify.swiperTabIdx' 
						:currentSwiperWidth='common.currentSwiperWidth' 
						:currentSwiperHeight='common.currentSwiperHeight' 
						:swiperColor='common.swiperColor' 
						:swiperCurrentColor='common.swiperCurrentColor' 
						:currentSwiperLineShow="common.currentSwiperLineShow"
						:currentSwiperLineActiveWidth="common.currentSwiperLineActiveWidth"
						:currentSwiperLineActiveHeight="common.currentSwiperLineActiveHeight"
						:currentSwiperLineActiveBg="common.currentSwiperLineActiveBg"
						:currentSwiperLineAnimatie="common.currentSwiperLineAnimatie"
						swiperFontSize="16px"
						@change="classifyCurrentTab"
						class="swiperNavBar"
					></swiperNavBar>
					<!-- 类型 -->
					<swiperNavBar
						:scrollIntoView="type.scrollIntoView"
						:swiperTabList='type.swiperTabList' 
						:swiperTabIdx='type.swiperTabIdx' 
						:currentSwiperWidth='common.currentSwiperWidth' 
						:currentSwiperHeight='common.currentSwiperHeight' 
						:swiperColor='common.swiperColor' 
						:swiperCurrentColor='common.swiperCurrentColor' 
						:currentSwiperLineShow="common.currentSwiperLineShow"
						:currentSwiperLineActiveWidth="common.currentSwiperLineActiveWidth"
						:currentSwiperLineActiveHeight="common.currentSwiperLineActiveHeight"
						:currentSwiperLineActiveBg="common.currentSwiperLineActiveBg"
						:currentSwiperLineAnimatie="common.currentSwiperLineAnimatie"
						swiperFontSize="16px"
						@change="typeCurrentTab"
						class="swiperNavBar"
					></swiperNavBar>
					<!-- 年份 -->
					<swiperNavBar
						:scrollIntoView="year.scrollIntoView"
						:swiperTabList='year.swiperTabList' 
						:swiperTabIdx='year.swiperTabIdx' 
						:currentSwiperWidth='common.currentSwiperWidth' 
						:currentSwiperHeight='common.currentSwiperHeight' 
						:swiperColor='common.swiperColor' 
						:swiperCurrentColor='common.swiperCurrentColor' 
						:currentSwiperLineShow="common.currentSwiperLineShow"
						:currentSwiperLineActiveWidth="common.currentSwiperLineActiveWidth"
						:currentSwiperLineActiveHeight="common.currentSwiperLineActiveHeight"
						:currentSwiperLineActiveBg="common.currentSwiperLineActiveBg"
						:currentSwiperLineAnimatie="common.currentSwiperLineAnimatie"
						swiperFontSize="16px"
						@change="yearCurrentTab"
						class="swiperNavBar"
					></swiperNavBar>
				</uni-transition>
				
				<view class="video-item">
					<view class="zone" :style="{ width: videoItemWidth + 'px'}" v-for="(item, index) in videoData" :key="index" @click="videoDataCilic(item)">
						<view class="item" >
							
							<view class="img">
								<image :src="item.vod_pic" mode=""></image>
								<text class="status">{{ item.vod_remarks }}</text>
								<text class="score">{{ item.vod_score }}</text>
							</view>
							<view class="txt">
								<text class="title">{{ item.vod_name }}</text>
								<text class="content">{{ item.vod_blurb }}</text>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { select } from '@/commons/querySelect.js'
	import swiperNavBar from '@/components/swiperNavBar/swiperNavBar.vue'
	import auiLoading from '@/components/aui-loading/aui-loading.vue'
	export default {
		components: {
			swiperNavBar,
			auiLoading
		},
		async mounted() {
			const header = await select('.header')
			this.scrlloClassifyItemHeight = this.$systemInfo.windowHeight - header.height - 50
			this.videoItemWidth = this.$systemInfo.windowWidth / 3 - 4
			this.getVideoDataList()
		},
		data() {
			return {
				statusBarHeight: this.$systemInfo.statusBarHeight,
				scrlloClassifyItemHeight: 0,
				videoItemWidth: 0,
				scrollTop: 0,
				old: {
				    scrollTop: 0
				},
				rotate: false,
				common: {
					scrollIntoView:0,
					swiperTabIdx:0,
					swiperFontSize: '13px',
					swiperCurrentFontSize: '16px',
					swiperColor:'#706b6f',
					swiperCurrentColor:'#32CCBC',
					currentSwiperWidth:'10%',
					currentSwiperHeight:70,
					mainHeight:200,
					currentSwiperLineShow:true,
					currentSwiperLineActiveBg:'#32CCBC',
					currentSwiperLineActiveWidth:'50rpx', 
					currentSwiperLineActiveHeight:'8rpx',
					currentSwiperLineAnimatie: 300,
					swiperNavBarWidth: 300,
				},
				classify: {
					swiperTabList: [ '全部','电影','电视剧','动漫','综艺'],
					scrollIntoView: 0,
					swiperTabIdx: 0
				},
				type: {
					swiperTabList: [ 
					'全部','喜剧','动作','爱情','科幻', '惊悚', '犯罪', '古装',
					'冒险', '悬疑', '剧情', '动画', '武侠', '战争', '奇幻', '警匪', '历史', '运动', '灾难',
					'恐怖'
					],
					scrollIntoView: 0,
					swiperTabIdx: 0
				},
				year: {
					swiperTabList: ['全部', 2011, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004,],
					scrollIntoView: 0,
					swiperTabIdx: 0
				},
				animationLock: true,
				params: {
					// 要获取几条
					limit: 20,
					// 排序
					sort: 'desc',
					// 要跳过几条
					skip: 0,
				},
				hasMore: true,
				videoData: [],
				searchCondition: {},
				
				auiLoading: {
				    show: false,
				    type: 3,
				    direction: 'col',
				    msg: 'Loading...',
				    mask: false,
					theme: 1
				},
				
				typeIndex: {
					'全部': {},
					'电影': {type_id_1: 1},
					'电视剧': { type_id_1: 2},
					'动漫': { type_id: 4, type_id_1: 0},
					'综艺': { type_id: 3, type_id_1: 0},
					
				}
				
			};
		},
		methods: {
			searchClick() {
				this.$goto('/pages/search/search')
			},
			unfoldClick(e) {
				if (!this.animationLock) return 
				this.rotate = !this.rotate
				this.animationLock = false
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
				    this.scrollTop = 0
				});
				const self = this
				setTimeout(() => {
					self.animationLock = true
				}, 600)
			},
			// 分类
			classifyCurrentTab(index, item) {
				
				this.searchCondition = {}
				this.searchCondition = this.typeIndex[item]
				console.log(this.searchCondition)
				this.CurrentTab('classify', index)
			},
			// 类型
			typeCurrentTab(index, item) {
				if (item == '全部') {
					item = ''
				}
				this.searchCondition.class = item
				this.CurrentTab('type', index)
			},
			yearCurrentTab(index, item) {
				if (item == '全部') {
					item = ''
				}
				this.searchCondition.year = item
				this.CurrentTab('year', index)
			},
			CurrentTab(item, index) {
				this[item].swiperTabIdx = index;
				this[item].scrollIntoView = Math.max(0, index - 1);
				this.clearClassify()
				this.getVideoDataList()
			},
			videoDataCilic(data) {
				this.$goto('/pages/player/player', data)
			},
			// 获取视频数据
			async getVideoDataList() {
				this.$refs.auiLoading.show()
				const { data: res } = await this.$http({
					url: this.$api.search,
					data: {
						...this.params,
						...this.searchCondition
					}
				})
				
				if (res.status != 200) {
					this.$refs.auiLoading.hide()
					uni.showToast({
						title: '没有找到资源',
						icon: 'none'
					})
					return 
				}
				
				if(res.data.result.length === 0) {
					this.$refs.auiLoading.hide()
					this.hasMore = false
					return
				}
				
				this.videoData = [...this.videoData, ...res.data.result]
				this.$refs.auiLoading.hide()
				
			},
			// 下拉触底
			handleToLower(e) {
				if (this.hasMore) {
					this.params.skip += this.params.limit
					this.getVideoDataList()
				} else {
					uni.showToast({
						title: '没有资源了',
						icon: 'none'
					})
				}
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			clearClassify() {
				this.params = {
					limit: 20,
					sort: 'desc',
					skip: 0
				}
				this.videoData = []
			}
		}
	}
</script>

<style lang="scss" scoped>


	.header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 150rpx;
		background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
		color: #fff;
		box-sizing: border-box;
		.titleView {
			display: flex;
			align-items: center;
			width: 100%;
			height: 128rpx;
			
			.search {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 64rpx;
				height: 64rpx;
				margin-left: 10rpx;
				.iconfont {
					font-size: 20px;
				}
			}
			
			.title {
				flex: 1;
				text-align: center;
				text{
					font-size: 20px;
					font-weight: bold;
				}
			}
			
			.unfold {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 72rpx;
				height: 72rpx;
				text-align: center;
				margin-right: 20rpx;
				
				image {
					width: 50rpx;
					height: 50rpx;
					transition: transform .6s ease 0s;
				}
			}
		}
	}
	
	.spin {
		transform: rotate(180deg);
	}
	
	.classify-item {
		width: 100%;
		
		
		.swiperNavBar {
			width: 100%;
			white-space: nowrap;
		}
		
		.video-item {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx;
			box-sizing: border-box;
			.zone {
				padding: 5rpx;
				box-sizing: border-box;
				
			}
			
			.item {
				
				display: flex;
				flex-direction: column;
				height: 350rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				.img {
					
					position: relative;
					width: 100%;
					height: 290rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					
					.status {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border-bottom-left-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						background-color: rgba(0,0,0,.3);
						font-size: 12px;
						color: #fff;
					}
					
					.score {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border-radius: 5rpx;
						background-color: rgba(50, 204, 188, .8);
						font-size: 12px;
						color: #fff;
					}
				}
				.txt {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 60rpx;
					margin-top: 5rpx;
					font-size: 12px;
					overflow: hidden;
					.title {
						height: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						
					}
					
					.content {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #ccc
					}
				}
				
			}
		}
	}
</style>
